<!-- 项目主页面内容 -->
<script lang="ts" setup>
interface labelList {
  id: number
  img?: string
  title?: string
  desc?: string
}

const items: labelList[] = [
  {
    id: 2001,
    img: '/src/assets/img/home/h-nav1.png',
    title: '工单系统',
    desc: '处理各类运营、运维工单问题',
  },
  {
    id: 2002,
    img: '/src/assets/img/home/h-nav2.png',
    title: '项目管理',
    desc: '管理软件项目',
  },
  {
    id: 2003,
    img: '/src/assets/img/home/h-nav3.png',
    title: '软著系统',
    desc: '生成软著审核文档，包含手册和代码以及简介',
  },
  {
    id: 2004,
    img: '/src/assets/img/home/h-nav4.png',
    title: '专利系统',
    desc: '生成各种类型的专利，发明、实用、外观',
  },
  {
    id: 2005,
    img: '/src/assets/img/home/h-nav5.png',
    title: '数据抽取ETL',
    desc: '数据抽取ETL',
  },
  {
    id: 2006,
    img: '/src/assets/img/home/h-nav6.png',
    title: '运维知识库',
    desc: '各类文档部署、运营、软件使用说明等',
  },
]
</script>

<template>
  <div class="mt-16">
    <div
      v-for="hi in 2"
      :key="hi"
      class="mt-10 mx-[100px] flex flex-row items-center justify-between"
    >
      <n-card
        v-for="item in items"
        :key="item.id"
        class="h-min-[220px] bg-indigo-700 shadow-xl shadow-gray-400 mx-3 pt-3 !w-screen !rounded-lg !border-neutral-100"
      >
        <span class="flex items-center justify-center">
          <n-image :src="item.img" width="80" />
        </span>
        <div class="text-center text-lg pt-2">
          {{ item.title }}
        </div>
        <div class="text-center text-[12px] pt-1 text-gray-400">
          {{ item.desc }}
        </div>
      </n-card>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
